<template>
  <div class="order-container">
    <!-- 主页面视图 -->
    <div v-if="currentView === 'main'" class="main-view">
      <div class="page-header">
        <h1 class="page-title">
          <el-icon class="title-icon">
            <Tickets />
          </el-icon>
          原材料订单管理
        </h1>
        <el-button type="primary" size="large" @click="showCreateOrder" class="add-btn">
          <el-icon>
            <Plus />
          </el-icon>
          新建订单
        </el-button>
      </div>

      <!-- 统计卡片区域 -->
      <div class="stat-cards">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-card__content">
            <div class="stat-card__icon total-icon">
              <el-icon>
                <Document />
              </el-icon>
            </div>
            <div class="stat-card__info">
              <div class="stat-card__title">订单总数</div>
              <div class="stat-card__value">{{ totalOrders }}</div>
              <div class="stat-card__unit">条</div>
            </div>
          </div>
        </el-card>

        <el-card class="stat-card" shadow="hover">
          <div class="stat-card__content">
            <div class="stat-card__icon pending-icon">
              <el-icon>
                <Clock />
              </el-icon>
            </div>
            <div class="stat-card__info">
              <div class="stat-card__title">待审核订单</div>
              <div class="stat-card__value">{{ pendingOrders }}</div>
              <div class="stat-card__unit">条</div>
            </div>
          </div>
        </el-card>

        <el-card class="stat-card" shadow="hover">
          <div class="stat-card__content">
            <div class="stat-card__icon ordered-icon">
              <el-icon>
                <Check />
              </el-icon>
            </div>
            <div class="stat-card__info">
              <div class="stat-card__title">已下单</div>
              <div class="stat-card__value">{{ orderedCount }}</div>
              <div class="stat-card__unit">条</div>
            </div>
          </div>
        </el-card>

        <el-card class="stat-card" shadow="hover">
          <div class="stat-card__content">
            <div class="stat-card__icon completed-icon">
              <el-icon>
                <CircleCheck />
              </el-icon>
            </div>
            <div class="stat-card__info">
              <div class="stat-card__title">已完成</div>
              <div class="stat-card__value">{{ completedCount }}</div>
              <div class="stat-card__unit">条</div>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 订单列表 -->
      <el-card class="data-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <span class="card-title">
              <el-icon>
                <List />
              </el-icon>
              原材料订单列表
            </span>
            <div class="header-actions">
              <el-select v-model="filterStatus" placeholder="全部" style="width: 120px; margin-right: 10px" clearable @change="queryMaterialOrder">
                <el-option label="全部" value="" />
                <el-option label="待审核" value="待审核" />
                <el-option label="已下单" value="已下单" />
                <el-option label="已完成" value="已完成" />
              </el-select>
              <el-input v-model="searchKeyword" placeholder="搜索原料名称..." style="width: 200px; margin-right: 10px"
                clearable @input="queryMaterialOrder">
                <template #prefix>
                  <el-icon>
                    <Search />
                  </el-icon>
                </template>
              </el-input>
              <el-date-picker v-model="startDate" type="date" placeholder="选择日期" format="YYYY-MM-DD"
                value-format="YYYY-MM-DD" @change="queryMaterialOrder" clearable style="width: 150px; margin-right: 10px"/>
            </div>
          </div>
        </template>

        <el-table :data="orderData" border stripe style="width: 100%" class="order-table">
          <el-table-column prop="orderId" label="订单ID"  align="center" />
          <el-table-column prop="supplierId" label="供应商ID"  align="center" />
          <el-table-column prop="materialName" label="原料名称"  />
          <el-table-column prop="materialCount" label="数量"  align="center" />
          <el-table-column prop="orderStatus" label="状态"  align="center">
            <template #default="scope">
              <el-tag :type="getStatusType(scope.row.orderStatus)" effect="dark">
                {{ scope.row.orderStatus }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="materialBatchId" label="批次号"  />
          <el-table-column prop="createTime" label="下单时间"  />
          <el-table-column label="操作" align="center" fixed="right">
            <template #default="{ row }">
              <el-button type="primary" size="small" @click="viewOrderDetail(row)">
                <el-icon>
                  <View />
                </el-icon>详情</el-button>
              <el-button type="success" size="small" @click="auditOrderBox(row.orderId)" v-if="row.orderStatus === '待审核'">
                <el-icon>
                  <Check />
                </el-icon>审核</el-button>
              <el-button type="warning" size="small" @click="markDelivered(row.orderId)" v-if="row.orderStatus === '已下单'">
                <el-icon>
                  <Finished />
                </el-icon>已送达</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="table-footer">
          <div class="table-info">显示 {{ (currentPage - 1) * pageSize + 1 }} 到 {{ Math.min(currentPage * pageSize,
            totalItems)
          }} 条，共 {{ totalItems }} 条记录</div>
          <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50]"
            layout="sizes, prev, pager, next" :total="totalItems" @current-change="handlePageChange"
            @size-change="handleSizeChange" />
        </div>
      </el-card>
    </div>

    <!-- 订单详情视图 -->
    <div v-else-if="currentView === 'detail'" class="detail-view">
      <div class="detail-header">
        <el-button type="info" @click="goBack" class="back-btn">
          <el-icon>
            <ArrowLeft />
          </el-icon>
          返回列表
        </el-button>
        <h2 class="detail-title">
          <el-icon>
            <Document />
          </el-icon>
          {{ isEditing ? '编辑订单' : '订单详情' }}
        </h2>
        <div v-if="!isEditing" class="detail-actions">
          <el-button type="primary" @click="enableEdit" v-if="currentOrder.orderStatus === '待审核'">
            <el-icon>
              <Edit />
            </el-icon>
            编辑
          </el-button>
          <el-button type="danger" @click="deleteOrderBox(currentOrder.orderId)">
            <el-icon>
              <Delete />
            </el-icon>
            删除
          </el-button>
        </div>
      </div>

      <el-card class="detail-card" shadow="hover">
        <el-form :model="currentOrder" label-width="120px" class="order-form">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="订单ID">
                <el-input v-model="currentOrder.orderId" :disabled="true" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="供应商">
                <el-select placeholder="请选择供应商" v-model="currentOrder.supplierId" clearable :disabled="!isEditing">
                  <el-option v-for="c in supplier" :key="c.supplierId" :label="c.supplierName" :value="c.supplierId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="原料名称">
                <el-input v-model="currentOrder.materialName" :disabled="!isEditing" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="数量">
                <el-input v-model="currentOrder.materialCount" :disabled="!isEditing" type="number" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="订单状态">
                <el-select v-model="currentOrder.orderStatus" :disabled="true" style="width: 100%">
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="批次号">
                <el-input v-model="currentOrder.materialBatchId" :disabled="!isEditing" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="下单时间">
                <el-input v-model="currentOrder.createTime" :disabled="true" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="更新时间">
                <el-input v-model="currentOrder.updateTime" :disabled="true" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <div v-if="isEditing" class="edit-actions">
          <el-button @click="cancelEdit">取消</el-button>
          <el-button type="primary" @click="saveOrder">保存</el-button>
        </div>
      </el-card>
    </div>

    <!-- 新建订单视图 -->
    <div v-else-if="currentView === 'create'" class="create-view">
      <div class="create-header">
        <el-button @click="goBack" class="back-btn">
          <el-icon>
            <ArrowLeft />
          </el-icon>
          返回
        </el-button>
        <h2 class="create-title">新建订单</h2>
      </div>

      <el-card class="create-card" shadow="hover">
        <el-form :model="newOrder" :rules="orderRules" ref="orderFormRef" label-width="120px" class="order-form">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="供应商" prop="supplierId">
                <el-select placeholder="请选择供应商" v-model="newOrder.supplierId" clearable>
                  <el-option v-for="c in supplier" :key="c.supplierId" :label="c.supplierName" :value="c.supplierId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="原料名称" prop="materialName">
                <el-input v-model="newOrder.materialName" placeholder="请输入原料名称" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="数量" prop="materialCount">
                <el-input v-model="newOrder.materialCount" placeholder="请输入数量" type="number" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="批次号" prop="materialBatchId">
                <el-input v-model="newOrder.materialBatchId" placeholder="请输入批次号" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <div class="create-actions">
          <el-button @click="resetForm">重置</el-button>
          <el-button type="primary" @click="createOrder">创建订单</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import {
  Search,
  Tickets,
  Plus,
  Document,
  Clock,
  Check,
  CircleCheck,
  List,
  View,
  ArrowLeft,
  Edit,
  Delete,
  Finished
} from '@element-plus/icons-vue'
import { supplierListService, queryMaterialOrderService, addMaterialOrderService, updateMaterialOrderService, deleteMaterialOrderService } from '@/api/SupervisorApi'


// 视图状态
const currentView = ref('main')
const isEditing = ref(false)

// 筛选和分页
const filterStatus = ref('')
const searchKeyword = ref('')
const startDate = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const totalItems = ref(0)

// 当前订单数据
const currentOrder = ref({
  orderId: 0,
  supplierId: 0,
  materialName: '',
  materialCount: 0,
  orderStatus: '',
  materialBatchId: '',
  createTime: '',
  updateTime: ''
})

// 新建订单数据
const newOrder = ref({
  supplierId: null,
  materialName: '',
  materialCount: null,
  materialBatchId: ''
})

//供应商数据
const supplier = ref([
  {
    "supplierId": 0,
    "supplierName": ""
  }
])

// 表单引用
const orderFormRef = ref<FormInstance>()

// 表单验证规则
const orderRules: FormRules = {
  supplierId: [
    { required: true, message: '请选择供应商', trigger: 'blur' },
  ],
  materialName: [
    { required: true, message: '请输入原料名称', trigger: 'blur' }
  ],
  materialCount: [
    { required: true, message: '请输入数量', trigger: 'blur' },
  ],
  materialBatchId: [
    { required: true, message: '请输入批次号', trigger: 'blur' }
  ]
}

// 模拟订单数据
const orderData = ref([
  {
    "orderId": 0,
    "supplierId": 0,
    "materialName": '',
    "materialCount": 0,
    "orderStatus": '',
    "materialBatchId": '',
    "createTime": '',
    "updateTime": ''
  }
])

// 计算属性
const totalOrders = computed(() => orderData.value.length)
const pendingOrders = computed(() => orderData.value.filter((order: any) => order.orderStatus === '待审核').length)
const orderedCount = computed(() => orderData.value.filter((order: any) => order.orderStatus === '已下单').length)
const completedCount = computed(() => orderData.value.filter((order: any) => order.orderStatus === '已完成').length)

// 获取状态对应的类型
const getStatusType = (status: string) => {
  switch (status) {
    case '待审核':
      return 'warning'
    case '已下单':
      return 'primary'
    case '已完成':
      return 'success'
    default:
      return 'info'
  }
}

// 查看订单详情
const viewOrderDetail = (row: any) => {
  currentOrder.value = { ...row }
  currentView.value = 'detail'
  isEditing.value = false
  supplierList()
}

// 审核订单
const auditOrder = async (orderId: number) => {
  let params = {
    orderId,
    orderStatus: '已下单'
  }
  const result = await updateMaterialOrderService(params) as any
  ElMessage.success('审核成功')
  queryMaterialOrder()
}

//审核弹窗
const auditOrderBox = (orderId: number) => {
    //退出登录
    ElMessageBox.confirm(
        '审核订单后无法修改！',
        '温馨提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    )
        .then(async () => {
            //删除订单
            auditOrder(orderId)
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消',
            })
        })
}

// 标记已送达
const markDelivered = async (orderId: number) => {
  let params = {
    orderId,
    orderStatus: '已完成'
  }
  const result = await updateMaterialOrderService(params) as any
  ElMessage.success('货物已送达')
  queryMaterialOrder()
}

// 显示新建订单页面
const showCreateOrder = () => {
  supplierList()
  currentView.value = 'create'
  resetForm()
}

// 启用编辑
const enableEdit = () => {
  isEditing.value = true
}

// 取消编辑
const cancelEdit = () => {
  isEditing.value = false
  // 重新获取原始数据
  const originalOrder = orderData.value.find((order: any) => order.orderId === currentOrder.value.orderId)
  if (originalOrder) {
    currentOrder.value = {
      ...originalOrder
    }
  }
}
// 保存订单
const saveOrder = async () => {
  const result = await updateMaterialOrderService(currentOrder.value) as any
  ElMessage.success(result.msg || '保存成功')
  queryMaterialOrder()
  isEditing.value = false
}

// 删除订单
const deleteOrder = async (orderId: number) => {
  const result = await deleteMaterialOrderService(orderId) as any
  goBack()
  ElMessage.success(result.msg || '删除成功')
  queryMaterialOrder()
}
// 删除弹窗
const deleteOrderBox = (orderId: number) => {
    //退出登录
    ElMessageBox.confirm(
        '确定删除该订单吗？无法恢复，谨慎删除！',
        '温馨提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    )
        .then(async () => {
            //删除订单
            deleteOrder(orderId)
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消',
            })
        })
}

//查询供应商列表
const supplierList = async () => {
  const result = await supplierListService() as any
  supplier.value = result.data
}

// 新建订单
const createOrder = async () => {
  if (!orderFormRef.value) return
  const result = await addMaterialOrderService({
    supplierId: newOrder.value.supplierId || 0,
    materialName: newOrder.value.materialName,
    materialCount: newOrder.value.materialCount || 0,
    materialBatchId: newOrder.value.materialBatchId
  }) as any
  //提示添加成功
  queryMaterialOrder()
  ElMessage.success(result.data?.msg || '添加成功')
  resetForm()
}

// 重置表单
const resetForm = () => {
  newOrder.value = {
    supplierId: null,
    materialName: '',
    materialCount: null,
    materialBatchId: ''
  }
  if (orderFormRef.value) {
    orderFormRef.value.clearValidate()
  }
}

// 返回主页面
const goBack = () => {
  currentView.value = 'main'
  isEditing.value = false
}

// 分页处理
const handlePageChange = (page: number) => {
  currentPage.value = page
  queryMaterialOrder()
}

// 页面大小变化处理
const handleSizeChange = (size: number) => {
  pageSize.value = size
  queryMaterialOrder()
}

//分页查询原材料订单
const queryMaterialOrder = async () => {
  let params = {
    pageNumber: currentPage.value,
    pageSize: pageSize.value,
    materialName: searchKeyword.value ? searchKeyword.value : '',
    orderStatus: filterStatus.value ? filterStatus.value : '',
    createTime: startDate.value ? startDate.value : '',
  }
  let result = await queryMaterialOrderService(params)
  orderData.value = result.data.records
  totalItems.value = result.data.total
}

//打开页面查询
queryMaterialOrder()
</script>

<style lang="scss" scoped>
.order-container {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;

  // 主页面样式
  .main-view {
    .page-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
      padding: 20px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

      .page-title {
        font-size: 28px;
        font-weight: bold;
        color: #fff;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 12px;

        .title-icon {
          font-size: 32px;
        }
      }

      .add-btn {
        background: rgba(255, 255, 255, 0.2);
        border: 2px solid rgba(255, 255, 255, 0.3);
        color: #fff;
        font-weight: bold;
        padding: 12px 24px;
        border-radius: 8px;
        transition: all 0.3s ease;

        &:hover {
          background: rgba(255, 255, 255, 0.3);
          transform: translateY(-2px);
          box-shadow: 0 6px 20px rgba(255, 255, 255, 0.2);
        }
      }
    }

    .stat-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
      margin-bottom: 30px;

      .stat-card {
        border-radius: 12px;
        border: none;
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-4px);
          box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }

        &__content {
          display: flex;
          align-items: center;
          padding: 24px;
        }

        &__icon {
          width: 60px;
          height: 60px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 20px;
          font-size: 24px;
          color: white;

          &.total-icon {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          }

          &.pending-icon {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
          }

          &.ordered-icon {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
          }

          &.completed-icon {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
          }
        }

        &__info {
          flex: 1;
        }

        &__title {
          font-size: 14px;
          color: #8492a6;
          margin-bottom: 8px;
          font-weight: 500;
        }

        &__value {
          font-size: 32px;
          font-weight: 700;
          color: #2c3e50;
          line-height: 1;
          margin-bottom: 4px;
        }

        &__unit {
          font-size: 12px;
          color: #8492a6;
          font-weight: 500;
        }
      }
    }

    .filter-card {
      margin-bottom: 20px;
      border-radius: 12px;
      border: none;

      .filter-form {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        padding: 8px;

        .filter-item {
          display: flex;
          align-items: center;

          .filter-label {
            margin-right: 10px;
            white-space: nowrap;
            font-weight: 500;
            color: #606266;
          }

          .filter-select {
            width: 140px;
          }
        }

        .search-box {
          flex-grow: 1;
          min-width: 200px;

          .search-input {
            width: 100%;
          }
        }

        .date-range {
          .el-date-picker {
            width: 160px;
          }
        }
      }
    }

    .data-card {
      border-radius: 12px;
      border: none;

      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .card-title {
          display: flex;
          align-items: center;
          font-size: 18px;
          font-weight: 600;
          color: #2c3e50;

          .el-icon {
            margin-right: 8px;
            color: #409eff;
          }
        }
      }

      .order-table {
        border-radius: 8px;
        overflow: hidden;

        :deep(.el-table__header) {
          background: #f8f9fa;

          th {
            background: #f8f9fa !important;
            color: #606266;
            font-weight: 600;
            border-bottom: 2px solid #e4e7ed;
          }
        }

        :deep(.el-table__row) {
          &:hover {
            background: #f0f9ff !important;
          }
        }
      }

      .table-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
        padding: 16px 0;

        .table-info {
          color: #8492a6;
          font-size: 14px;
        }
      }
    }
  }

  // 详情页面样式
  .detail-view {
    .detail-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
      padding: 20px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

      .back-btn {
        background: rgba(255, 255, 255, 0.2);
        border: 2px solid rgba(255, 255, 255, 0.3);
        color: #fff;

        &:hover {
          background: rgba(255, 255, 255, 0.3);
        }
      }

      .detail-title {
        font-size: 24px;
        font-weight: bold;
        color: #fff;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .detail-actions {
        display: flex;
        gap: 12px;
      }
    }

    .detail-card {
      border-radius: 12px;
      border: none;

      .order-form {
        padding: 20px;

        :deep(.el-form-item__label) {
          font-weight: 600;
          color: #606266;
        }

        :deep(.el-input__wrapper) {
          border-radius: 8px;
        }

        :deep(.el-select .el-input__wrapper) {
          border-radius: 8px;
        }
      }

      .edit-actions {
        display: flex;
        justify-content: center;
        gap: 16px;
        padding: 20px;
        border-top: 1px solid #e4e7ed;
        margin-top: 20px;
      }
    }
  }

  // 新建页面样式
  .create-view {
    .create-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
      padding: 20px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

      .back-btn {
        background: rgba(255, 255, 255, 0.2);
        border: 2px solid rgba(255, 255, 255, 0.3);
        color: #fff;

        &:hover {
          background: rgba(255, 255, 255, 0.3);
        }
      }

      .create-title {
        font-size: 24px;
        font-weight: bold;
        color: #fff;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 12px;
      }
    }

    .create-card {
      border-radius: 12px;
      border: none;

      .order-form {
        padding: 20px;

        :deep(.el-form-item__label) {
          font-weight: 600;
          color: #606266;
        }

        :deep(.el-input__wrapper) {
          border-radius: 8px;
        }
      }

      .create-actions {
        display: flex;
        justify-content: center;
        gap: 16px;
        padding: 20px;
        border-top: 1px solid #e4e7ed;
        margin-top: 20px;
      }
    }
  }

  // 标签样式
  :deep(.el-tag) {
    border-radius: 6px;
    font-weight: 500;
    padding: 4px 12px;

    &.el-tag--warning {
      background: linear-gradient(135deg, #fef0e6 0%, #fff2e8 100%);
      color: #e6a23c;
      border: 1px solid #f5dab1;
    }

    &.el-tag--primary {
      background: linear-gradient(135deg, #e6f4ff 0%, #f0f9ff 100%);
      color: #409eff;
      border: 1px solid #b3d8ff;
    }

    &.el-tag--success {
      background: linear-gradient(135deg, #f0f9e6 0%, #f6ffed 100%);
      color: #67c23a;
      border: 1px solid #b7eb8f;
    }
  }

  // 卡片阴影效果
  :deep(.el-card) {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    }
  }
}
</style>